<template>
	<div id="store" class="container">

		<Top/>
		<Title/>
		<div class='main'>
			<div class='title'>
				<h2>100㎡美肌潮店 </h2>
				<h3>2.0单店配备</h3>
			</div>
			<div class="F1">
				<img src="../../../static/imgs/img3/119.png" alt="" />
			</div>
			<div class="F2">
				<img src="../../../static/imgs/img3/qgmd.png" alt="" />
			</div>
			<div class="F3">
				<MengD/>
			</div>
			<div class='F4'>
				<div class="title">终端门店</div>
				<div class="con">
					<img src="../../../static/imgs/img3/md.png" alt="" />

				</div>
			</div>

		</div>
		<Foot/>

	</div>
</template>

<script>
	import Top from '../components/base/Top.vue'
	import Title from '../components/base/title.vue'
	import Foot from '../components/base/foot.vue'
	import MengD from '../components/stores/mengD'

	export default {
		name: "Store",
		components: {
			Top,
			Title,
			Foot,
			MengD
		}
	}
</script>

<style lang='scss' scoped>
	#store {
		background: url('../../../static/imgs/bk/bk_1.jpg') no-repeat;
		.main {
			.title {
				margin-bottom: 50px;
				h2 {
					text-align: center;
					font-size: 57px;
					color: #F5855F;
					line-height: 102px;
				}
				h3 {
					font-size: 41px;
					text-align: center;
					color: #555451;
					line-height: 73px;
				}
			}
			.F1 {
				height: 760px;
				height: 1000px;
				text-align: center;
				ul {
					position:relative li {
						position: absolute;
						font-size: 39px;
						color: #fff;
						border-radius: 50px;
						background-color: #F7855A;
					}
				}
			}
			.F2 {
				padding: 150px;
				text-align: center;
			}
			.F4 {
				.title {
					padding-top: 113px;
					text-align: center;
					font-size: 58px;
					font-family: SourceHanSansCN-Heavy;
					color: #F5855F;
					line-height: 104px;
				}
			}
		}
	}
</style>